<template>
  <view class="tabs-container" :style="{ color, height: height + 'px' }">
    <view class="tab-item" :class="{ active: activeIndex == index }" v-for="(item, index) in items" :key="index" :data-index="index" @tap="tapTab(index)">
      <nut-icon class="tab-icon" font-class-name="iconfont" class-prefix="icon" :name="item.icon" :size="size" />
      <view class="tab-item-label">{{ item.label }}</view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
const props = defineProps({
  color: {
    type: String,
    default: '#000'
  },
  background: {
    type: String,
    default: '#fff'
  },
  height: {
    type: Number,
    default: 75
  },
  size: {
    type: Number,
    default: 25
  },
  items: {
    type: Array,
    default() {
      return [
        { label: '首页', icon: 'shouye1-copy' },
        { label: '影视', icon: 'yingshi-copy' },
        // { label: '订单', icon: 'dingdan1' },
        { label: '我的', icon: 'wode3-copy' }
      ]
    }
  }
})

const emit = defineEmits(['tapTab'])

const activeIndex = ref(0)
const tapTab = val => {
  if (activeIndex.value != val) {
    emit('tapTab', val, activeIndex.value)
    activeIndex.value = val
  }
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';

.tabs-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 12px;
  display: flex;
  text-align: center;
  justify-content: space-around;
  box-sizing: border-box;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(20px);
  background: hsla(0, 0%, 100%, 0.8) border-box;
  .tab-item {
    flex: 1;
    opacity: 0.5;
    .tab-item-label {
      line-height: 16px;
      font-size: 12px;
      color: $title-color;
    }
  }
  .active {
    opacity: 1 !important;
    font-weight: 500;
    transition: all 0.25s;
  }
}
</style>
